<%--
  Created by IntelliJ IDEA.
  User: Wang Ziming
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>队伍信息</title>
</head>
<body>
    <%@include file="/WEB-INF/parts/head.jsp"%>
    <%--标题，指明应用内容--%>
    <h2 class="content-name" style="font-family: STSong;"><b>Group Travel</b></h2>

    <table id="tb" align="center" border="1" cellpadding="0" cellspacing="0" width="80%">
        <thead>
            <tr>
                <th colspan="5">${group.groupName}</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <%--信息栏--%>
                <td rowspan="7" colspan="3" id="info-column" align="left">
                    <%--输出信息--%>
                    <%--js获取数值--%>
                    <script>
                        var groupId="${group.groupId}";
                    </script>
                    ${group.destinations}&nbsp;&nbsp;&nbsp;<button id="addCollection">添加收藏</button><br>
                    集合时间：&nbsp;&nbsp;${group.gatheringTime}<br>
                    集合地点：&nbsp;&nbsp;${group.meetingPlace}<br>
                    预计持续时间：${group.duration}
                </td>
            </tr>
            <%--使用c:forEach最多打印出5个成员--%>
            <c:forEach items="${users}" var="user" begin="0" end="4">
                <tr>
                    <td>${user.username}</td>
                    <td><button type="button" class="btn-score">确定</button><input type="text" placeholder="1-10" class="score"></td>
                </tr>
            </c:forEach>
            <tr>
                <td colspan="2" id="addAndRemove">
                    <button id="add">加入</button>
                    <button id="remove">移除</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <%--聊天栏部分--%>
            <tr>
                <td rowspan="3"  colspan="1" align="center" id="chat">聊天栏</td>
                <td colspan="4" id="window">
                    <div class="box">
                        <div class="inTer" id="father">
                            <p>你好</p ></br>
                            <p>你好</p ></br>
                            <p>你好</p ></br>
                        </div>
                        <textarea style="resize: none;" id="txt"></textarea>
                        <input type="button" id="btn" value="发送" />
                    </div>
                </td>
            </tr>
            <%--<tr>
                &lt;%&ndash;发送的内容与发送按钮&ndash;%&gt;
                <td colspan="3" class="self-send"><input type="text" id="info"></td>
                <td align="right" class="send"><button id="send">发送</button></td>
            </tr>--%>
        </tfoot>

    </table>
</body>
<%--css--%>
<link type="text/css" rel="stylesheet" href="/css/index.css">
<style>
    /*整个表格table的设置*/
    table{
        height: 78%;        /*刚刚好*/
    }
    /*队伍名*/
    th{
        font-size: 30px;
        height: 12%;
    }
    /*左侧信息栏*/
    #info-column{
        width: 50%;
        /*针对tr行的偏移情况*/
        padding-left: 40px;
        /*padding-top: 0px;
        padding-bottom: 0px;*/
    }
    /*add按键*/
    #addAndRemove{
        height: 25px;
    }
    /*聊天栏：框设置*/
    #chat{
        width: 20%;
    }
    /*聊天窗口*/
    #window{
        height: 80px;
        color: lightgrey;
    }
    /*具体的聊天框实现*/
    /*---------------*/
    .box{
        width:100%;
        height:150px;
        border:1px solid blue;
        margin:0 auto;
    }
    .inTer{
        width: 95%;
        height:95%;
        /*border:1px solid deeppink;*/
        margin: 10px auto 0;
        overflow-y:auto;
    }
    textarea{
        display:block;
        width: 300px;
        height:50px;
        margin: 15px auto -15px auto;
    }
    #btn{
        display:block;
        float:right;
        margin-right:10px;
        margin-top:5px;
    }
    p{
        display:inline-block;
        border-radius:5px;
        color: black;
        background:#dcdcdc;
        font-size:12px;
        padding:5px 5px;
        margin: 5px 0 5px 5px;
        max-width:140px;
        word-wrap: break-word;
    }
</style>

<%--js--%>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
    $(function () {
        $(".btn-score").click(function () {
            //前端相应
            alert("分数确定");
            //后端处理
            $.post("/evaluation/scoreOthers",{
                score:$(".score").val()
            });
        });
        /*聊天框功能实现*/
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var father = document.getElementById("father")
        var p = document.getElementsByTagName("p");
        btn.onclick=function(){
            if(txt.value==""){
                alert("请勿发送空内容");
            }
            else{
                var son = document.createElement("p");
                son.style.backgroundColor="yellowgreen";
                son.style.clear="both";
                son.style.float="right";
                son.style.marginRight="5px";
                son.innerText=txt.value;
                father.appendChild(son);
                txt.value="";
                son.scrollIntoView();
            }

        };
        document.onkeydown=function(evt){
            var e = evt || event;
            e.keyCode=e.which=e.charCode;
            if(e.keyCode==13 || e.keyCode==10){
                if(txt.value==""){
                    alert("请勿发送空内容");
                }
                else{
                    var son = document.createElement("p");
                    son.style.backgroundColor="yellowgreen";
                    son.style.clear="both";
                    son.style.float="right";
                    son.style.marginRight="5px";
                    son.innerText=txt.value;
                    father.appendChild(son);
                    txt.value="";
                    son.scrollIntoView();
                }
            }
        };
        var newRow;     //行对象
        /*实现添加和移除*/
        $("#add").click(function () {
            //实现添加功能，暂时不加入到数据库中，只是前端展示
            //js中获取当前用户的名字
            var username="${user.username}";
            console.log(username);
            //获取展示行，插入到其中
            newRow=document.getElementById('tb').insertRow();
            //设置挨个的项
            var cell=newRow.insertCell();
            /*$.post("/postTest",null,function () {
                cell.innerHTML=username;
                alert("添加成功");
            });*/
            cell.innerHTML=username;
            alert("添加成功");
        });

        /*删除行*/
        $("#remove").click(function () {
            delRow(newRow);
            alert("删除成功");
        });

        //得到行对象
        function getRowObj(obj)
        {
            while(obj.tagName.toLowerCase() != "tr"){
                obj = obj.parentNode;
                if(obj.tagName.toLowerCase() == "table")
                    return null;
            }
            return obj;
        }

        //根据得到的行对象得到所在的行数
        function getRowNo(obj){
            var trObj = getRowObj(obj);
            var trArr = trObj.parentNode.children;
            for(var trNo= 0; trNo < trArr.length; trNo++){
                if(trObj == trObj.parentNode.children[trNo]){
                    alert(trNo+1);
                }
            }
        }

        //删除行
        function delRow(obj){
            var tr = getRowObj(obj);
            if(tr != null){
                tr.parentNode.removeChild(tr);
            }else{
                throw new Error("the given object is not contained by the table");
            }
        }

        /*提交收藏 $.post实现*/
        $("#addCollection").click(function () {
            //获取groupId
            $.post("/collection/addCollection",{
                groupId:groupId.valueOf()
            },function () {
                alert("收藏成功")
            });
        });
    })
</script>
</html>
